<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{border: solid 10px black;font-size: 40px;}
  </style>
</head>
<body>
  <div class="box" style="width: 100px;height:100px;background: red;">
    文字
  </div>
</body>
<script>
  var box = document.querySelector(".box")

  // 行内样式：即可获取，又可设置
  // 只能获取行内，不能获取非行内
  // console.log( box.style );
  // console.log( box.style.width );
  // console.log( box.style.height );
  // console.log( box.style.background );

  // console.log( box.style.border );

  // box.style.color = "yellow";

  // delete box.style.background;

  // box.style.background = "";



  // 非行内样式：只能获取，不能设置
  // 既能获取非行内，也能获取行内
  // console.log( getComputedStyle( box ) );
  // console.log( getComputedStyle( box ).border );
  // console.log( getComputedStyle( box ).fontSize );
  // console.log( getComputedStyle( box ).width );
  // console.log( getComputedStyle( box ).height );
  // console.log( getComputedStyle( box ).background );

  // getComputedStyle( box ).color = "yellow"


  // getComputedStyle，不兼容IE低版本浏览器

  // IE低版本浏览器支持：box.currentStyle.css属性
  // console.log( box.currentStyle )

  // if( box.currentStyle ){
  //   console.log( box.currentStyle.width );
  // }else{
  //   console.log(getComputedStyle( box ).width);
  // }

  // 获取：非行内样式的获取方式
  // 设置：行内样式的设置方式


  function getStyle(ele, attr){
    if( ele.currentStyle ){
      return ele.currentStyle[attr];
    }else{
      return getComputedStyle( ele )[attr];
    }
  }

  console.log(getStyle(box, "color"));
  console.log(getStyle(box, "border"));
  console.log(getStyle(box, "width"));
  console.log(getStyle(box, "height"));
  console.log(getStyle(box, "background"));


</script>
</html>